<template>
	<view class="body">
		<form @submit="formSubmit">
			<view class="face-wapper">
				<image src="../../static/icos/default-face.png" class="face"></image>
			</view>
			
			<view class="info-wapper">
				<label class="words-lbl">账号</label>
				<input name="username" type="text" value="" class="input" placeholder="请输入用户名" placeholder-class="graywords"/>
			</view>
			
			<view class="info-wapper" style="margin-top: 40upx;">
				<label class="words-lbl">密码</label>
				<input name="password" type="text" value="" password="true" class="input" placeholder="请输入密码" placeholder-class="graywords"/>
			</view>
			
			<button type="primary" form-type="submit" style="margin-top: 60upx;width: 90%;">注册/登录</button>
		</form>
		
		
		<!-- 第三方登录H5不支持，所以隐藏掉 -->
		<!-- #ifndef H5 -->
			<view class="third-wapper">
				
				<view class="third-line">
					<view class="single-line">
						<view class="line"></view>
					</view>
					
					<view class="third-words">第三方账号登录</view>
					
					<view class="single-line">
						<view class="line"></view>
					</view>
				</view>
				
				<view class="third-icos-wapper">
					<!-- 5+app 用qq/微信/微博 登录 小程序用微信小程序登录 h5不支持 -->
					<!-- #ifdef APP-PLUS -->
						<image src="../../static/icos/weixin.png" data-logintype="weixin" @click="appOAuthLogin" class="third-ico"></image>
						<image src="../../static/icos/QQ.png" data-logintype="qq" @click="appOAuthLogin" class="third-ico" style="margin-left: 80upx;"></image>
						<image src="../../static/icos/weibo.png" data-logintype="sinaweibo" @click="appOAuthLogin" class="third-ico" style="margin-left: 80upx;"></image>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
						<button  @click="wxLogin" class="third-btn-ico">
						</button>
					<!-- #endif -->
				</view>
			</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			appOAuthLogin(e){
				var logintype = e.currentTarget.dataset.logintype
				uni.login({
					provider:logintype,
					success: (loginRes) => {
						var code = loginRes.authResult.openid
						console.log(code)
						uni.getUserInfo({
							success: (es1) => {
								if(logintype === "weixin"){
									var info = es1.userInfo
									var usInfo = {
										nickname : info.nickName,
										faceImage:info.avatarUrl,
										id:code
									}
									uni.setStorageSync("information",usInfo)
									uni.switchTab({
										url:'../me/me'
									})
								}
								if(logintype === "qq"){
									var info = es1.userInfo
									var usInfo = {
										nickname : info.nickname,
										faceImage:info.avatarUrl,
										id:code
									}
									uni.setStorageSync("information",usInfo)
									uni.switchTab({
										url:'../me/me'
									})
								}
								if(logintype === "sinaweibo"){
									var info = es1.userInfo
								}
							},
							
						})
					}
				})
			},
			wxLogin(e){
				uni.getUserProfile({
					desc:'用于完善会员资料',
					success:(res) => {
						var userInfo = res.userInfo
						var avatarUrl = userInfo.avatarUrl
						var nickName = userInfo.nickName
						var whichMP = 1
						console.log(avatarUrl)
						uni.login({
						  provider: 'weixin',
						  success:(loginRes) => {
						    console.log(loginRes);
							var code = loginRes.code
							var usInfo = {
								nickname : nickName,
								faceImage:avatarUrl,
								id:code
							}
							console.log(usInfo)
							uni.setStorageSync("information",usInfo)
							uni.switchTab({
								url:'../me/me'
							})
						  }
						});
					}
				})
			},
			formSubmit(e){
				var username = e.detail.value.username
				var password = e.detail.value.password
				var listUrl = this.ListUrl
				uni.request({
					url: listUrl + 'user/registOrLogin?qq=lee77789087',
					method:"POST",
					data:{
						password:password,
						username:username,
						
					},
					success: (request) => {
						console.log(request)
						if(request.data.status===200){
							var information = request.data.data
							uni.setStorageSync('information',information)
							uni.switchTab({
								url:'../me/me'
							})
						}
						if(request.data.status===500){
							uni.showToast({
								title:request.data.msg,
								mask:true,
								duration:1500,
								image:'../../static/icos/error.png'
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
.body {
	border-top: solid 1px #DBDBDA;
	padding: 0 40upx;
}

/* 头像 start */
.face-wapper {
	display: flex;
	flex-direction: row;
	justify-content: center;
	
	margin-top: 120upx;
	margin-bottom: 120upx;
}

.face {
	width: 160upx;
	height: 160upx;
}
/* 头像 end */

/* 注册登录 start */
.info-wapper {
	display: flex;
	flex-direction: row;
	justify-content: center;
	
	border-bottom: solid 1px #DBDBDA;
	
	padding-bottom: 20upx;
}

.words-lbl {
	color: #808080;
}

.input {
	width: 500upx;
	margin-left: 40upx;
}

.graywords {
	color: #EAEAEA;
}

/* 注册登录 end */

/* 第三方登录 start */
.third-wapper {
	width: 100%;
	/* 固定底部 */
	/* bottom: 0;
	position: fixed; */
	
	margin-top: 60upx;
	
}

.third-line {
	display: flex;
	flex-direction: row;
	justify-content: center
}

.third-words {
	color: #A9A9A9;
	font-size: 13px;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.single-line {
	padding: 15upx 20upx;
	width: 25%;
	align-items: center;
}

.third-icos-wapper {
	margin-top: 30upx;
	
	display: flex;
	flex-direction: row;
	justify-content: center
}

.third-ico {
	width: 60upx;
	height: 60upx;
}

.third-btn-ico {
	background-image:url(http://122.152.205.72:88/group1/M00/00/05/CpoxxFxFO-yAOjTaAAATCIZEzRU503.png);
	width: 60upx;
	height: 60upx;
	background-color: white;
	background-size: 60upx 60upx;
	background-repeat:no-repeat;
	border:none;
	padding: 0;
}
button::after{
	border: none;
}
/* 第三方登录 end */
</style>
